import React, { memo, useState, useMemo } from "react";
import { View } from "@tarojs/components";
import DataPicker from "../../DataPicker"
import ScrollItem from "../ScrollItem"




import './index.scss'

const RevenueCompair = (props) => {
  const { reportDetail } = props

  const [keyName1, setKeyName1] = useState("fourYearAgoYield")
  const [keyName2, setKeyName2] = useState("fourYearAgoRetraction")

  const dataList = useMemo(() => {
    const year = new Date().getFullYear()
    return [
      {
        label: year - 4,
        value: 5 * 365
      },
      {
        label: year - 3,
        value: 4 * 365
      },
      {
        label: year - 2,
        value: 3 * 365
      },
      {
        label: year - 1,
        value: 2 * 365
      },

      {
        label: year + '至今',
        value: 5 * 365
      }]
  }, [])

  const changeCurrent = (index) => {
    switch (index) {
      case 0:
        setKeyName1('fourYearAgoYield')
        setKeyName2('fourYearAgoRetraction')
        break
      case 1:
        setKeyName1('threeYearAgoYield')
        setKeyName2('threeYearAgoRetraction')
        break
      case 2:
        setKeyName1('twoYearAgoYield')
        setKeyName2('twoYearAgoRetraction')

        break
      case 3:
        setKeyName1('oneYearAgoYield')
        setKeyName2('oneYearAgoRetraction')

        break
      case 4:
        setKeyName1('thisYearYield')
        setKeyName2('thisYearRetraction')

        break
    }
  }
  return (
    <View className='scroll-box2'>
      <View className='card-name text1 black'>收益对比</View>
      {/* <ScrollItem />
      <ScrollItem /> */}
      <ScrollItem reportDetail={reportDetail} title='收益率' keyName={keyName1} showColor showPercent />
      <ScrollItem reportDetail={reportDetail} title='最大回撤' keyName={keyName2} showPercent showColor />
      <View className='data-box'>
        <DataPicker dataList={dataList} changeCurrent={changeCurrent} />
      </View>
    </View>




  );
};

export default memo(RevenueCompair);
